<template>
  <div class="goodsClass-box">
    <div class="topfixed">
      <nav-com
        :title="shopDetail.shopname"
        :showView="showView"
        @back="backHandler()"
      ></nav-com>
      <div class="top-ban">
        <img :src="shopDetail.banner" />
      </div>
      <div class="top-nav">
        <div
          class="nav-item"
          :class="activeIndx == 1 ? 'active' : ''"
          @click="tabchange(1)"
        >
          综合
        </div>
        <div
          class="nav-item"
          :class="activeIndx == 2 ? 'active' : ''"
          @click="tabchange(2)"
        >
          销量
        </div>
        <div
          class="nav-item"
          :class="activeIndx == 3 ? 'active' : ''"
          @click="tabchange(3)"
        >
          价格
        </div>
      </div>
    </div>
    <!-- tab -->
    <div class="model">
      <div
        class="goods-box"
        v-for="(item, index) in list"
        :key="index"
        @click="handerDetails(item.id)"
      >
        <div class="goods-img">
          <img :src="item.image" mode="aspectFill" />
        </div>
        <div class="goods-info">
          <div class="name">{{ item.title }}</div>
        </div>
        <div class="baoyou" v-if="item.isdelivery == '1'">全部包邮</div>
        <div class="goods-info">
          <div class="price">¥{{ item.price }}</div>
          <div class="sale">已售{{ item.sales }}件</div>
        </div>
        <div class="shopname">{{ item.shopname }}</div>
      </div>
    </div>
    <van-tabbar v-model="active" inactive-color="#222222" active-color="#FA2C1E" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { shopdetail, shopgoodslist } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Popup, Toast, Search } from "vant";
import { Icon } from "vant";
import Upgrade from "@/component/upgrade.vue";

export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      showView: true,
      LOADING: true,
      show: false,
      shopDetail: {},
      list: [],
      activeIndx: 1,
      active: 0,
      shop_id:'',
      tabbarList: [
        {
          path: "/allshopgoods/"+(this.$route.params["id"] || "1"),
          title: "全部商品",
          normal:require('@/assets/shop/tab01.png'),
          active:require('@/assets/shop/tab1.png'),
        },
        {
          path: "/goodsClass/"+(this.$route.params["id"] || "1"),
          title: "店铺分类",
          normal:require('@/assets/shop/tab02.png'),
          active:require('@/assets/shop/tab2.png'),
        },
        {
          path: "/shopShare/"+(this.$route.params["id"] || "1"),
          title: "分享店铺",
          normal:require('@/assets/shop/tab03.png'),
          active:require('@/assets/shop/tab3.png'),
        },
      ],
    };
  },
  //监听路由变化
  watch: {
    $route(to) {
      this.activeTab(to.path);
    },
  },
  mounted() {
    console.log("shop_id",this.$route.params["id"] )
    this.shop_id = this.$route.params["id"] || "1";
    this.getlist();
    this.getshopdetail();
  },
  methods: {
    activeTab(path) {
      var index = this.tabbarList.map((item) => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    getshopdetail() {
      shopdetail({ id: this.shop_id }).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data) {
            this.shopDetail = res.data.data;
          }
        }
      });
    },
    getlist() {
      shopgoodslist({ shop_id: this.shop_id, sort: this.activeIndx })
        .then((result) => {
          if (result.data.code == 1) {
            this.list = result.data.data.data;
          }
        })
        .catch((err) => {});
    },
    tabchange(index) {
      this.activeIndx = index;
      this.getlist();
    },
    //跳转详情
    handerDetails(id) {
      this.$router.push({
        name: "sharegoodDetails",
        params: { id: id },
      });
    },
  },
};
</script>
<style scoped>
.topfixed {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 10;
}
.top-ban img {
  height: 130px;
  width: 100%;
}
.top-nav {
  display: flex;
  height: 42px;
}
.top-nav .nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav .nav-item.active {
  color: #fe4b20;
}
.model {
  background: #f8f8f8;
  min-height: 80vh;
  display: flex;
  padding: 240px 10px 0;
  flex-wrap: wrap;
}
.goods-box {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
  border-radius: 6px;
  width: 47.9%;
    float: left;
    padding-bottom: 5px;
    height: 36vh;
        margin-bottom: 10px;
}
.goods-box:nth-child(odd) {
  margin-right: 10px;
}
.goods-img {
  width: 100%;
}
.goods-img img {
  width: 100%;
  height: 20vh;
  border-radius: 6px;
}
.goods-info {
  position: relative;
  height: 34px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goods-info .name {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 18px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
  text-overflow: -o-ellipsis-lastline;
	overflow: hidden;			
	text-overflow: ellipsis;	
	display: -webkit-box;		
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;
}
.goods-info .sale {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.baoyou {
  width: 48px;
  height: 14px;
  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 5%);
  border-radius: 2px;
  border: 1px solid #ff3200;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff3200;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.price {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fe4b20;
  line-height: 22px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
}
.shopname {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
  text-shadow: 0px 2px 10px rgb(0 0 0 / 5%);
  padding: 0 10px;
}
</style>
